<template>
  <div :class="`${PREFIX}`" :style="style">
    <p :class="`${PREFIX}-title`">会员</p>
    <div :class="`${PREFIX}-imgs`">
      <div :class="`${PREFIX}-imgs-item`">
        <img src="../assets/img/icon1.png" alt="" />
        <p>身份标识</p>
      </div>
      <div :class="`${PREFIX}-imgs-item`">
        <img src="../assets/img/icon2.png" alt="" />
        <p>高级筛选</p>
      </div>
      <div :class="`${PREFIX}-imgs-item`">
        <img src="../assets/img/icon3.png" alt="" />
        <p>谁看过我</p>
      </div>
      <div :class="`${PREFIX}-imgs-item`">
        <img src="../assets/img/icon4.png" alt="" />
        <p>谁关注我</p>
      </div>
    </div>
    <div :class="`${PREFIX}-block`">
      <div :class="`${PREFIX}-block-item`">
        <p>连续包月</p>
        <p>¥98</p>
      </div>
      <div :class="`${PREFIX}-block-item`">
        <p>连续包季</p>
        <p>¥198</p>
        <p>节省 ¥96</p>
        <span>月均 ¥66</span>
      </div>
      <div :class="`${PREFIX}-block-item`">
        <p>连续包年</p>
        <p>¥498</p>
        <p>节省 ¥678</p>
        <span>月均 ¥41.5</span>
      </div>
    </div>
  </div>
</template>
<script setup>
const PREFIX = "page5";
import { computed } from "vue";
import Download from "../components/Download.vue";
const props = defineProps({
  height: {
    type: Number,
    default: 0,
  },
});

const style = computed(() => ({ height: `${props.height}px` }));
</script>
<style lang="less">
.page5 {
  width: 1400px;
  height: 100%;
  margin: 0 auto;
  padding: 85px 91px 72px 110px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  &-title {
    color: #666666;
    text-align: center;
    font-size: 42px;
  }
  &-imgs {
    display: flex;
    justify-content: center;
    margin: 57px 0 70px 0;
    &-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      &:not(:first-child) {
        margin-left: 120px;
      }
      & > img {
        width: 76px;
        height: 76px;
      }
      & > p {
        color: #333333;
        font-size: 28px;
        font-weight: 500;
        line-height: normal;
        letter-spacing: -1px;
        margin-top: 62px;
      }
    }
  }
  &-block {
    display: flex;
    justify-content: center;
    &-item {
      &:not(:first-child) {
        margin-left: 24px;
      }
      width: 262px;
      height: 350px;
      text-align: center;
      border-radius: 24px;
      border: 5px solid #999;
      box-sizing: border-box;
      padding-top: 52px;
      position: relative;
      overflow: hidden;
      & > p {
        &:nth-child(1) {
          // .连续包季 {
          color: #333333;
          //  text-align: center;
          //  font-family: "Inter";
          font-size: 28px;
          //  font-style: normal;
          font-weight: 500;
          //  line-height: normal;
          letter-spacing: -1px;
          // }
        }
        &:nth-child(2) {
          // .¥198 {
          color: #fa6400;
          //  text-align: center;
          //  font-family: "Inter";
          font-size: 56px;
          //  font-style: normal;
          font-weight: 500;
          //  line-height: normal;
          letter-spacing: -2px;
          margin: 31px 0 34px 0;
          // }
        }
        &:nth-child(3) {
          // .节省 ¥96 {
          color: #999999;
          //  text-align: center;
          //  font-family: "Inter";
          font-size: 28px;
          //  font-style: normal;
          font-weight: 500;
          //  line-height: normal;
          letter-spacing: -1px;
          // }
        }
      }
      & > span {
        display: block;
        width: 100%;
        height: 60px;
        // height: 290.79px;
        // flex-shrink: 0;
        // border-radius: 23.45px;
        background: #999;
        color: #ffffff;
        //  text-align: center;
        //  font-family: "Inter";
        font-size: 28px;
        //  font-style: normal;
        font-weight: 500;
        line-height: 60px;
        position: absolute;
        left: 0;
        bottom: 0;
      }
    }
  }
}
</style>
